<template>
  <div class="view-cont">
    <div ref="dataVCont">
      <div :style="dataVContStyle">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { debounce, observerDomResize } from "../util";
export default {
  data() {
    return {
      dom: null,
      dataVContStyle: {
        transform: "scale(1, 1)"
      }
    };
  },
  computed: {
    ...mapGetters(["isCollapse"])
  },
  watch: {
    isCollapse() {
      setTimeout(() => {
        this.initWH();
      }, 400);
    }
  },
  mounted() {
    this.dom = this.$refs["dataVCont"];
    this.initWH();
    this.getDebounceInitWHFun();
    this.bindDomResizeCallback();
  },
  methods: {
    initWH() {
      this.$nextTick(() => {
        const dataVContW = this.$refs["dataVCont"].clientWidth;
        const dataVContH = this.$refs["dataVCont"].clientHeight;
        this.dataVContStyle = {
          transform: `scale(${dataVContW / 1920}, ${dataVContH / 1080})`
        };
      });
    },
    getDebounceInitWHFun() {
      this.debounceInitWHFun = debounce(100, this.initWH);
    },
    bindDomResizeCallback() {
      this.domObserver = observerDomResize(this.dom, this.debounceInitWHFun);
      window.addEventListener("resize", this.debounceInitWHFun);
    },
    unbindDomResizeCallback() {
      this.domObserver.disconnect();
      this.domObserver.takeRecords();
      this.domObserver = null;
      window.removeEventListener("resize", this.debounceInitWHFun);
    }
  },
  beforeDestroy() {
    this.unbindDomResizeCallback();
  }
};
</script>

<style scoped>
.view-cont {
  /* border-radius: 4px; */
  -webkit-box-shadow: rgba(0, 0, 0, 0.08) 1px 1px 8px;
  box-shadow: rgba(0, 0, 0, 0.08) 1px 1px 8px;
  /* height: calc(100vh - 106px); */
  /* height: calc(100vh - 86px); */
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-image: url("https://oss.sdland-sea.com/group1/M01/0E/D4/Cof8EWGuw92AKD-bABT4ic2dPP4538.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
}
.view-cont > div {
  width: 100%;
  height: 100%;
}
.view-cont > div > div {
  transform-origin: left top;
}
</style>
